<template>
  <view class="record-container">
    <view class="header">
      <text class="title">消费记录</text>
    </view>
    
    <view class="record-list">
      <view v-for="(item, index) in records" :key="index" class="record-item">
        <view class="record-info">
          <view class="record-type">
            <text class="member-name">{{ item.memberName }}</text>
            <text class="duration">{{ item.duration }}天</text>
          </view>
          <view class="record-detail">
            <text class="amount">{{ item.manner === 0 ? item.amount + '欢乐豆' : '￥' + item.amount }}</text>
            <text class="time">{{ formatDate(item.createTime) }}</text>
          </view>
        </view>
        <view class="delete-btn" @tap="deleteRecord(item.id)">删除</view>
      </view>
    </view>

    <view v-if="records.length === 0" class="empty-tip">
      <text>暂无消费记录</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      records: [],
      userId: uni.getStorageSync('userId') || 1
    }
  },
  
  onShow() {
    this.getRecords()
  },
  
  methods: {
    // 获取消费记录
    async getRecords() {
      try {
        console.log('开始请求记录，userId:', this.userId);
        const res = await uni.request({
          url: 'http://127.0.0.1:9224/consumption/records', // 推荐用IP
          method: 'GET',
          data: {
            userId: this.userId
          }
        });
        // 兼容H5和小程序端返回值
        const response = Array.isArray(res) ? res[0] : res;
        console.log('后端返回的数据:', response);
        if (response && response.data && response.data.code === 200) {
          this.records = response.data.data;
          console.log('查询到的消费记录:', this.records);
        } else {
          uni.showToast({
            title: (response && response.data && response.data.msg) || '获取记录失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取记录失败:', error);
        uni.showToast({
          title: '获取记录失败',
          icon: 'none'
        });
      }
    },
    
    // 删除记录
    deleteRecord(id) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这条记录吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              // const res = await this.$http.delete(`/consumption/${id}`, {
              //   params: {
              //     userId: this.userId
              //   }
              // })
              const res = await uni.request({
                url: `http://127.0.0.1:9224/consumption/${id}?userId=${this.userId}`,
                method: 'DELETE',
                // data: {
                //   userId: this.userId
                // }
              });

              // 兼容H5和小程序端返回值
              const response = Array.isArray(res) ? res[0] : res;

              if (response && response.data && response.data.code === 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                })
                this.getRecords()
              } else {
                uni.showToast({
                  title: response.data.msg,
                  icon: 'none'
                })
              }
            } catch (error) {
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              })
            }
          }
        }
      })
    },
    
    // 格式化日期
    formatDate(dateStr) {
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hour = String(date.getHours()).padStart(2, '0')
      const minute = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hour}:${minute}`
    }
  }
}
</script>

<style lang="scss" scoped>
.record-container {
  min-height: 100vh;
  background-color: #fff;
  padding: 32rpx 20rpx;

  .header {
    padding: 20rpx 0 32rpx 0;
    .title {
      color: #222;
      font-size: 36rpx;
      font-weight: bold;
      letter-spacing: 2rpx;
    }
  }

  .record-list {
    .record-item {
      background: #fff;
      border-radius: 18rpx;
      margin-bottom: 28rpx;
      padding: 28rpx 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 4rpx 16rpx rgba(7,193,96,0.08);
      border: 1rpx solid #f0f0f0;
      transition: box-shadow 0.2s;

      &:active {
        box-shadow: 0 8rpx 24rpx rgba(7,193,96,0.16);
      }

      .record-info {
        flex: 1;

        .record-type {
          margin-bottom: 12rpx;
          display: flex;
          align-items: center;

          .member-name {
            color: #222;
            font-size: 30rpx;
            font-weight: 500;
            margin-right: 18rpx;
          }

          .duration {
            color: #07c160;
            font-size: 26rpx;
            font-weight: bold;
            display: flex;
            align-items: center;
            &::before {
              content: '';
              display: inline-block;
              width: 24rpx;
              height: 24rpx;
              background: url('/static/vip/icon-badge.png') no-repeat center/cover;
              margin-right: 6rpx;
            }
          }
        }

        .record-detail {
          display: flex;
          align-items: center;
          gap: 24rpx;

          .amount {
            color: #faad14;
            font-size: 28rpx;
            font-weight: bold;
          }

          .time {
            color: #bbb;
            font-size: 24rpx;
          }
        }
      }

      .delete-btn {
        color: #ff4d4f;
        font-size: 28rpx;
        padding: 10rpx 24rpx;
        border-radius: 24rpx;
        background: #fff0f0;
        border: 1rpx solid #ff4d4f;
        transition: background 0.2s;
        &:active {
          background: #ffeded;
        }
      }
    }
  }

  .empty-tip {
    text-align: center;
    padding: 120rpx 0;
    color: #bbb;
    font-size: 30rpx;
    letter-spacing: 2rpx;
  }
}
</style> 